<template>
	<div class="type">
		<div class="title">
			<span>类型管理</span>
			<button @click="add()">添加</button>
		</div>
		<div class="main">
			<el-table :data="alllist" style="width: 100%">
				<el-table-column prop="id" width="180" />
				<el-table-column prop="type" width="180" />
				<el-table-column prop="address">
					<template #default="scope">
						<button @click="update(scope.row)">修改</button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="operation" v-if="show==1">
			<h3>浏览中</h3>
			<p>类型ID:<input readonly="readonly"></p>
			<p>类型类型:<input type="text"></p>
			<button>浏览中 提交</button>
		</div>
		<div class="operation" v-if="show==2">
			<h3>更新</h3>
			<p>类型ID:<input v-model="obj.id" readonly="readonly"></p>
			<p>类型类型:<input type="text" v-model="obj.type"></p>
			<button @click="realupdate()">更新 提交</button>
		</div>
		<div class="operation" v-if="show==3">
			<h3>添加</h3>
			<p>类型ID:<input v-model="obj.id" readonly="readonly"></p>
			<p>类型类型:<input type="text" v-model="obj.type"></p>
			<button @click="addmsg()">添加 提交</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Typecon',
		data() {
			return {
				show: 1,
				alllist: [],
				obj: {
					id: '',
					type: ''
				}
			}
		},
		methods: {
			update(val) {
				this.show = 2
				this.obj.id = val.id
				this.obj.type =val.type
			},
			realupdate() {
				let that = this
				if (this.obj.type != '') {
					let data = {
						id: this.obj.id,
						type: this.obj.type
					}
					this.axios.post('/api/adm/type/add', this.$qs.stringify(data), {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}
					}).then((res) => {
						that.alllist = res.data.data
					}).catch((error) => {
						console.log(error);
					})
				}
			},
			add() {
				this.obj.id = 0
				this.obj.type = ''
				this.show = 3
			},
			addmsg() {
				let that = this
				if (this.obj.type != '') {
					//请求地址 /api/adm/type/add
					//提交的数据：this.$qs.stringify(data)
					//配置：headers对象
					let data = {
						id: this.obj.id,
						type: this.obj.type
					}
					this.axios.post('/api/adm/type/add', this.$qs.stringify(data), {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}
					}).then((res) => {
						that.alllist = res.data.data
					}).catch((error) => {
						console.log(error);
					})
				}

			}
		},
		created() {
			this.axios.get('/api/adm/type/findAll').then((res) => {
				let data = res.data.data
				this.alllist = data
			}).catch((error) => {
				console.log(error);
			})
		}
	}
</script>

<style scoped>
	.type span {
		font-size: 23px;
		margin: auto;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		display: block;
		line-height: 50px;
		border-bottom: 2px solid gainsboro;
		font-weight: bold;
	}

	.title button {
		float: right;
		height: 30px;
		margin-top: 10px;
		width: 100px;
		color: gold;
		margin-right: 10px;
		background-color: #FF0000;
		border-radius: 5px;
		border: none;
	}

	.main {
		float: left;
		width: 50%;
	}

	.main table {
		margin-top: 70px;
		width: 50%;
		margin-left: 10%;
		border: 1px solid black;
	}

	.main table button {
		background-color: #FF0000;
		border: none;
		color: gold;
		border-radius: 5px;
	}

	.main tr td {
		text-align: center;
		height: 35px;
		line-height: 35px;
		border: 1px solid black;
	}

	.main tr td button:hover {
		background-color: gold;
		color: red;
		cursor: pointer;
	}

	.operation {
		height: 300px;
		width: 45%;
		float: left;
		margin-top: 15px;
		border-left: 2px solid red;
	}

	.operation h3 {
		font-size: 20px;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		margin: auto;
		line-height: 50px;
		border-bottom: 1px solid gold;
		font-weight: bold;
	}

	.operation p {
		text-indent: 1em;
		height: 60px;
		width: 90%;
		margin: auto;
		line-height: 60px;
		border-bottom: 1px solid gold;
	}

	.operation input {
		margin-left: 10px;
		width: 300px;
		height: 30px;
		outline: none;
		border-radius: 5px;
		border: none;
		border: 1px solid red;
		text-indent: 1em;
	}

	.operation button {
		margin-top: 15px;
		margin-left: 5%;
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid red;
		background-color: #FF0000;
		color: gold;
		font-size: 15px;
	}

	.operation button:hover {
		background-color: gold;
		color: red;
		border: 1px solid gold;
		cursor: pointer;
	}
</style>
